<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<header>
			<nav>
				<!-- logo部分 -->
				<div class="logo">
					<img src="images/logo_03.png" alt="" />
				</div>
				<!-- 导航栏部分 -->
				<div class="navbar">
					<ul>
						<li><a href="#">首页</a></li>
						<li><a href="#">课程</a></li>
						<li><a href="#">职业规划</a></li>
					</ul>
				</div>
				<!-- 搜索框部分 -->
				<div class="search">
					<form action="">
						<input type="text" />
						<input type="submit" value="" />
					</form>
				</div>


			</nav>
		</header>

		<div class="banner">
			<div class="banner-in container">
				<!-- 左侧导航栏 侧边栏-->
				<div class="slidebar">
					<ul>
						<li><a href="#">前端开发<span>></span></a></li>
						<li><a href="#">前端开发<span>></span></a></li>
						<li><a href="#">前端开发<span>></span></a></li>
						<li><a href="#">前端开发<span>></span></a></li>
						<li><a href="#">前端开发<span>></span></a></li>
						<li><a href="#">前端开发<span>></span></a></li>
						<li><a href="#">前端开发<span>></span></a></li>
						<li><a href="#">前端开发<span>></span></a></li>
						<li><a href="#">前端开发<span>></span></a></li>
					</ul>
				</div>

				<!-- 右侧小盒子 我的课程表 -->
				<dl class="timetable">
					<dt>我的课程表</dt>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<p>正在学习-使用对象</p>
					</dd>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<p>正在学习-使用对象</p>
					</dd>
					<dd>
						<h4>继续学习 程序语言设计</h4>
						<p>正在学习-使用对象</p>
					</dd>
					<dd>
						<a href="#">全部课程</a>
					</dd>
				</dl>

				<ul class="circle">
					<li class="current"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>

			</div>
		</div>

		<div class="recommend container">
			<!-- 精品推荐 -->
			<a href="#">精品推荐</a>
			<a href="#">Jquery</a>
			<a href="#">Spart</a>
			<a href="#">MySql</a>
			<a href="#">Sql Server</a>
			<a href="#">javaWeb</a>
			<a href="#">ASP.NET</a>
			<a href="#">修改兴趣</a>
		</div>

		<!-- 精品推荐大模块 -->
		<div class="recom-products container">
			<div class="recom-hd">
				<h4>精品推荐</h4>
				<a href="#">查看全部</a>
			</div>
			<div class="recom-bd clearfix">
				<ul>
					<li>
						<img src="images/icon1.png" alt="" />
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>1225人学习</p>
					</li>
					<li>
						<img src="images/icon1.png" alt="" />
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>1225人学习</p>
					</li>
					<li>
						<img src="images/icon1.png" alt="" />
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>1225人学习</p>
					</li>
					<li>
						<img src="images/icon1.png" alt="" />
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>1225人学习</p>
					</li>
					<li>
						<img src="images/icon1.png" alt="" />
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>1225人学习</p>
					</li>
					<li>
						<img src="images/icon1.png" alt="" />
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>1225人学习</p>
					</li>
					<li>
						<img src="images/icon1.png" alt="" />
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>1225人学习</p>
					</li>
					<li>
						<img src="images/icon1.png" alt="" />
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>1225人学习</p>
					</li>
					<li>
						<img src="images/icon1.png" alt="" />
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>1225人学习</p>
					</li>
					<li>
						<img src="images/icon1.png" alt="" />
						<h5>Think PHP 5.0 博客系统实战项目演练</h5>
						<p><span>高级</span>1225人学习</p>
					</li>
				</ul>
			</div>
		</div>


		<!-- 页面底部 -->
		<footer>
			<div class="container footer-in">
				<div class="footer-l">
					<img src="images/logo_03.png" alt="" />
					<p>XXX教育在线普及中国最好的教育水平和一流的大学进行合作提供在线课程<br />@2019年保留权限</p>
					<a href="#">下载APP</a>
				</div>
				<div class="footer-r">
					<dl>
						<dt>
							关于XXX
						</dt>
						<dd><a href="#">关于</a></dd>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
					</dl>
					<dl>
						<dt>
							关于XXX
						</dt>
						<dd><a href="#">关于</a></dd>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
					</dl>
					<dl>
						<dt>
							关于XXX
						</dt>
						<dd><a href="#">关于</a></dd>
						<dd><a href="#">管理团队</a></dd>
						<dd><a href="#">工作机会</a></dd>
						<dd><a href="#">客户服务</a></dd>
						<dd><a href="#">帮助</a></dd>
					</dl>
				</div>
			</div>
		</footer>

	</body>
</html>
